<template>
  <div id="jurisdiction" class="el-row--flex">
    <div class="left el-row--flex">
      <el-tabs
        v-model="activeName"
        class="el-row--flex"
        @tab-click="handleClick"
      >
        <el-tab-pane label="角色" name="role">
          <el-scrollbar>
            <ul class="roleList el-row--flex">
              <li
                v-for="(item, index) in roleList"
                :key="index"
                class="el-row--flex"
                :class="{ active: item.isActive }"
                @click="getAuthorization(item)"
              >
                <i class="el-icon-tickets" />
                <span class="name ellipsis">{{ item.name }}</span>
                <span v-if="index !== 0" class="iconList">
                  <i class="el-icon-edit" @click.stop="open('update', item)" />
                  <i class="el-icon-delete" @click.stop="roledelete(item.id)" />
                  <!-- <i class="el-icon-arrow-right" /> -->
                </span>
              </li>
            </ul>
          </el-scrollbar>
          <i class="el-icon-circle-plus-outline roleAdd" @click="open('add')" />
        </el-tab-pane>
        <el-tab-pane label="用户" name="user">
          <div style="margin: 5px auto;width:80%">
            <el-input
              v-model="realname"
              placeholder="请输入内容"
              class="input-with-select"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="getUserListByTean"
              />
            </el-input>
          </div>
          <el-scrollbar>
            <el-tree
              class="userList"
              :data="userList"
              node-key="id"
              :props="defaultProps"
              @check="handleCheck"
            ><span
              slot-scope="{ node, data }"
              class="custom-tree-node"
              :class="{ 'tree-node-first': node.level === 1 }"
            >
              <i class="el-icon-user-solid" />
              <span>{{ node.label }}</span>
              <Popconfirm
                message="将该用户添加到当前项目？"
                :confirm-callback="userAdd"
                :data="data"
              >
                <template>
                  <i
                    class="el-icon-circle-plus-outline"
                    style="padding: 5px;"
                  />
                </template>
              </Popconfirm>
            </span>
            </el-tree>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="right el-row--flex">
      <!-- <el-scrollbar> -->
      <keep-alive>
        <authorizationList
          v-if="activeName === 'role'"
          ref="authorizationList"
        />
        <userList
          v-if="activeName === 'user'"
          ref="userList"
          :project-id="proejctId"
        />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import {
  getRoleList,
  roleAdd,
  roleUpdate,
  roledelete,
  getUserListByTean,
  userAdd
} from '@/api/jurisdiction'
import authorizationList from './authorizationList'
import userList from './userList'

export default {
  name: 'Jurisdiction',
  components: { authorizationList, userList },
  data() {
    return {
      activeName: 'role',
      roleList: [],
      userList: [],
      realname: '',
      selectedRole: {},
      defaultProps: {
        children: 'children',
        label: 'relname'
      }
    }
  },
  computed: {},
  mounted() {
    this.getRoleList()
    this.getUserListByTean()
  },
  methods: {
    getRoleList() {
      getRoleList()
        .then(result => {
          const { data } = result
          this.roleList = data
          this.getAuthorization(this.roleList[0])
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    },
    open(type, item) {
      this.selectedRole = item
      const title = type === 'add' ? '添加角色' : '修改角色'
      this.$prompt('', title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: item ? item.name : '',
        closeOnClickModal: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            console.log(instance)
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            type === 'add'
              ? this.roleAdd(instance, done)
              : this.roleUpdate(instance, done)
          } else {
            done()
          }
        }
      })
    },
    roleAdd(instance, done) {
      const name = instance.inputValue
      roleAdd(name, name)
        .then(result => {
          console.log(result)
          const { data } = result
          this.roleList.push(data)

          instance.confirmButtonLoading = false
          done()
        })
        .catch(err => {
          console.log(err)
        })
    },
    roleUpdate(instance, done) {
      const name = instance.inputValue
      roleUpdate(name, name, this.selectedRole.id)
        .then(result => {
          this.selectedRole.name = name
          console.log(result)
          instance.confirmButtonLoading = false
          done()
        })
        .catch(err => {
          console.log(err)
        })
    },
    roledelete(id) {
      roledelete(id)
        .then(result => {
          this.roleList.splice(
            this.roleList.findIndex(v => v.id === id),
            1
          )
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getAuthorization(item) {
      this.roleList.filter(item => (item.isActive = false))
      item.isActive = true
      this.$forceUpdate()
      console.log(this.$refs.authorizationList)
      this.$refs.authorizationList.getAuthorization(item.id)
    },
    getUserListByTean() {
      const teamId = JSON.parse(sessionStorage.userInfo).teamId
      getUserListByTean(teamId, this.realname)
        .then(result => {
          console.log(result.data)
          const { data } = result
          this.userList = data
        })
        .catch(err => {
          console.log(err)
        })
    },
    userAdd(user) {
      const { username, relname, sex, phone, qq, email, deptName, id } = user
      userAdd(username, relname, sex, phone, qq, email, deptName, id)
        .then(result => {
          this.getUserListByProject()
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    },
    getUserListByProject(item) {
      this.$refs.userList.getUserListByProject()
    },
    handleClick(tab, event) {
      if (tab.name === 'user') {
        setTimeout(() => {
          this.getUserListByProject()
        }, 200)
      }
      console.log(tab, event)
    },
    handleCheck(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    }
  }
}
</script>

<style lang="scss" scoped>
#jurisdiction {
  background: rgba(255, 255, 255, 1);
  border: 16px solid #fff;
  // padding: 16px 15px 16px 15px;

  .left {
    width: 479px;
    height: 100%;
    background: rgba(249, 249, 249, 1);
    border-radius: 10px;
    margin-right: 16px;
    overflow: hidden;

    .roleList {
      list-style: none;
      padding: 0;
      flex-direction: column;
      align-items: flex-end;

      li {
        width: 448px;
        height: 89px;
        line-height: 89px;
        padding: 0 29px 0 31px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;

        &.active {
          background: rgba(255, 255, 255, 1);
          color: rgba(44, 161, 213, 1);
          .el-icon-arrow-right {
            opacity: 1;
          }
        }

        i {
          line-height: 89px;
          margin-right: 10px;
        }

        .el-icon-arrow-right {
          opacity: 0;
        }
        .name {
          width: 250px;
          display: inline-block;
        }
      }
    }
    .roleAdd {
      font-size: 30px;
      padding: 0 29px 0 31px;
      color: rgba(44, 161, 213, 1);
    }
    .userList {
      padding: 0 60px;
      color: #757575;
      background-color: rgba(44, 161, 213, 0);
    }
  }

  .right {
    height: 100%;
    flex: 1;
    background: rgba(249, 249, 249, 1);
    border-radius: 10px;
    overflow: hidden;
    padding: 28px;
  }
}
</style>

<style lang="scss">
#jurisdiction {
  .el-tabs {
    flex: 1;
    flex-direction: column;
    position: relative;
    .el-tabs__header {
      padding: 0 60px;

      .el-tabs__item {
        width: 64px;
        height: auto;
        line-height: 40px;
        box-sizing: content-box;
        text-align: center;
        padding: 53px 20px 20px 20px;
      }
    }

    .el-tabs__content {
      flex: 1;
      & > div {
        height: 100%;
        width: 100%;
      }
    }
  }

  .userList {
    .is-checked {
      color: #2ca1d5;
    }
  }

  .el-scrollbar {
    height: calc(100% - 50px);
  }

  .userList {
    .el-tree-node__content {
      height: 50px;
      line-height: 50px;
      i {
        color: #69c2e9;
        margin: 0 10px;
      }
    }
  }
}
</style>
